<template>
  <je-modal
    v-model:visible="visibleModule"
    width="600px"
    height="auto"
    class="sql-definition"
    :resize="false"
    :maximizable="false"
    :title="$t('SqlDefinition.title')"
    cancel-button
    :ok-button="addModule"
    @close="cancelModal"
  >
    <je-form layout="vertical" autocomplete="off">
      <je-form-item name="sql" v-bind="validateInfos.sql">
        <template #label>
          {{ $t('SqlConfiguration.sql') }}
          <i
            class="conditionicon fas fa-question-circle"
            style="margin-left: 5px"
            @click="clickIcon"
          ></i>
        </template>
        <je-input-textArea v-model:value.trim="formState.sql" style="height: 400px" />
      </je-form-item>
    </je-form>
  </je-modal>
  <Explain
    v-if="explainType"
    :modal-context="modalContext"
    width="400px"
    @closEexplain="closEexplain"
  />
</template>
<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { Input, Modal, Form } from '@jecloud/ui';
  import { verifyData } from '@/helper/common';
  import Explain from '@/components/explain/index.vue';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'SqlDefinition',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInputTextArea: Input.TextArea,
      Explain,
    },
    props: {
      checkedRow: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    emits: ['setModalType', 'closeModal'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(true);
      const formState = reactive({
        sql: props.checkedRow.resourceName || '',
      });

      const rulesRef = reactive({
        sql: [verifyData.required],
      });
      const { resetFields, validate, validateInfos } = useForm(formState, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = ({ $modal, button }) => {
        //保存数据逻辑
        //保存数据逻辑
        validate()
          .then(() => {
            emit('setModalType', { type: 'SqlConfiguration', data: formState });
            emit('closeModal', { type: 'ok', modalType: 'SqlConfiguration' });
            $modal.close();
          })
          .catch((error) => {});
        return false;
      };
      //弹窗关闭方法
      const cancelModal = () => {
        emit('closeModal', { type: 'cancel', modalType: 'SqlConfiguration' });
      };

      //点击icon
      const modalContext = ref('');
      const explainType = ref(false);
      const clickIcon = () => {
        modalContext.value =
          '以and开头编写sql代码，支持变量写法，例如：系统变量{@USER_ID@}、或取表单字段{FIELD_CODE}';
        explainType.value = true;
      };
      //弹窗关闭回调
      const closEexplain = () => {
        explainType.value = false;
      };
      return {
        addModule,
        visibleModule,
        formState,
        cancelModal,
        validateInfos,
        resetFields,
        clickIcon,
        modalContext,
        explainType,
        closEexplain,
      };
    },
  });
</script>

<style lang="less">
  .sql-definition {
    .ant-col.ant-form-item-control {
      min-height: auto !important;
    }
  }
</style>
